<template>
  <el-dialog
    title="添加门店"
    @close="handleClose"
    :visible="visible"
    width="40%"
    center
  >
    <div class="from_box">
      <div class="from_box_l">商户营业执照代码：</div>
      <el-input
        v-model.trim="formInline.businessLicence"
        placeholder="请输入内容"
        :disabled="show"
      ></el-input>
    </div>
    <div class="from_box">
      <div class="from_box_l">连锁模式：</div>
      <el-radio-group v-model="formInline.chainType">
        <el-radio label="1">直营店</el-radio>
        <el-radio label="2">加盟店</el-radio>
      </el-radio-group>
    </div>
    <div class="from_box">
      <div class="from_box_l">收款方式：</div>
      <el-radio-group v-model="formInline.proceedsType" :disabled="show">
        <el-radio label="1">总部收款 </el-radio>
        <el-radio label="2">门店收款</el-radio>
      </el-radio-group>
    </div>
    <div class="button_box">
      <el-button style="margin-right: 30px" @click="handleClose"
        >取消</el-button
      >
      <el-button type="primary" :loading="buttonLoading" @click="sumit"
        >确认</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
// api
import {
  chainshopDetail,
  addShop,
  editMerchant,
  deleteMerchant,
} from "@/api/chainManagement";

export default {
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    return {
      loading:false,
      formInline: {
        businessLicence: "", //营业执照
        chainType: "", //连锁类型 1 直营店 2加盟店
        proceedsType: "", //收款类型 1 总部收款 2门店收款
      },
      buttonLoading: false,
      chainId: "", //总店id
      status: 1,
      storeId: "", //关联门店id
      show: false,
    };
  },
  created() {
    this.chainId = this.$route.query.id;
    console.log('this.chainId',this.id)
    if(this.id){
      this.lookDetail()
      this.status = 2;
      this.show = true;
    }else{
      this.formInline = {
        businessLicence: "", //营业执照
        chainType: "", //连锁类型 1 直营店 2加盟店
        proceedsType: "", //收款类型 1 总部收款 2门店收款
      };
    }
  },
  methods: {
    sumit() {
      console.log(this.status);
      //确认
      if (this.status == 1) {
        this.addShop();
      } else {
        this.clickEdit();
      }
    },
    lookDetail() {
      //点击编辑
      let id = this.id;
      chainshopDetail(id).then((res) => {
        this.formInline = res.result;
        this.storeId = res.result.id;
      });
    },
    clickEdit() {
      //编辑editMerchant
      const params = {
        chainType: this.formInline.chainType,
        proceedsType: this.formInline.proceedsType,
        id: this.storeId,
      };
      this.buttonLoading = true;
      editMerchant(params)
        .then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
          });
          this.buttomLoading = false;
          this.$emit('success')
          this.handleClose()
        })
        .finally(() => {
          this.buttonLoading = false;
        });
    },
    addShop() {
      //新增
      const params = {
        ...this.formInline,
        chainId: this.chainId,
      };
      this.buttonLoading = true;
      addShop(params)
        .then((res) => {
          this.$message({
            message: "添加成功",
            type: "success",
            duration: 1500,
          });
          this.buttomLoading = false;
          this.$emit('success')
          this.handleClose()
        })
        .finally(() => {
          this.buttonLoading = false;
        });
    },
    handleClose() {
      console.log('哈哈哈哈')
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
  .button_box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.from_box {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}
.from_box_l {
  font-size: 14px;
  color: #606266;
  width: 240px;
  text-align: right;
}
.add_boxls {
  display: flex;
  align-items: center;
  justify-content: center;
}
.add_box {
  width: 45%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  height: 152px;
  cursor: pointer;
  background: #fdf6ec;
  border: 1px solid #f5dab1;
  color: #e6a23c;
}
.add_box2 {
  background: #ecf5ff;
  border: 1px solid #b3d8ff;
  color: #409eff;
}
.add_box:hover {
  opacity: 0.8;
}
.add_box img {
  width: 46px;
  height: 46px;
  margin-right: 12px;
}
</style>
